<template>
  <div class="nav">
    <baidu-map class="map" :center="map.center" :zoom="map.zoom" @ready="handler">
      <!--缩放-->
      <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT"></bm-navigation>
      <!--定位-->
      <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
      <!--点-->
      <bm-marker :position="map.center" :dragging="map.dragging" animation="BMAP_ANIMATION_DROP">
        <!--提示信息-->
        <bm-info-window :show="map.show">杭州蓝宸信息科技有限公司</bm-info-window>
      </bm-marker>
    </baidu-map>
  </div>
</template>

<script>
export default {
  name: 'TestBaiDu',
  data: () => ({
    map: {
      center: { lng: 119.993576, lat: 30.2813 },
      zoom: 19,
      show: true,
      dragging: true
    },
  }),
  methods: {
    handler ({ BMap, map }) {
      let me = this;
      console.log(BMap, map)
      // 鼠标缩放
      map.enableScrollWheelZoom(true);
      // 点击事件获取经纬度
      map.addEventListener('click', function (e) {
        console.log(e.point.lng, e.point.lat)
      })
    }
  }
}

</script>

<style scoped>
.nav {
  width: 100%;
}
.map {
  width: 100%;
  height: calc(100vh - 0.8rem);
}
</style>
